<template>
  <div class="box u-p-t-50">
    <div class="box_left">
      <el-row class="is-back-padding">
        <el-form
          :model="formData"
          size="mini"
          label-width="110px"
          style="width: 100%; display: flex; justify-content: space-around"
        >
          <el-col :span="11">
            <el-form-item label="所属公司" required>
              <el-select
                v-model="formData.leixingdaima"
                placeholder="请选择所属公司"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in listOptions.CompanyCodeOptions"
                  :key="index"
                  :label="item.Name"
                  :value="item.ID"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="地址名称" required>
              <el-input
                v-model="formData.jilubianhao"
                placeholder="请输入地址名称"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="地址简称" required>
              <el-input
                v-model="formData.kehujiancheng"
                placeholder="请输入地址简称"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="省市区" required>
              <el-cascader
                v-model="formData.newaddress"
                :options="listOptions.addressAllOption"
                :props="{
                  value: 'label',
                  children: 'children',
                }"
                :style="{ width: '100%' }"
                placeholder="请选择省市区"
                @change="mapChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="经度">
              <el-input
                v-model="formData.jingdu"
                disabled
                placeholder="请输入经度"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input
                v-model="formData.tonyishehuiixngyondao"
                placeholder="请输入联系人"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="所属供应商">
              <el-input
                v-model="formData.suoshugonghyingshang"
                placeholder="请输入所属供应商"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="销售员名称">
              <el-select
                v-model="formData.xiaoshouyuanmingcheng"
                placeholder="请选择销售员名称"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in listOptions.CompanyCodeOptions"
                  :key="index"
                  :label="item.Name"
                  :value="item.ID"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="自定义项1">
              <el-input
                v-model="formData.zhidinyixiang"
                placeholder="请输入自定义项1"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="特殊要求">
              <el-input
                v-model="formData.teshuyaoqiu"
                placeholder="请输入特殊要求"
                :style="{ width: '100%' }"
                type="textarea"
                maxlength="50"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="地址类别" required>
              <el-select
                v-model="formData.CompanyCode"
                placeholder="请选择地址类别"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in listOptions.CompanyCodeOptions"
                  :key="index"
                  :label="item.Name"
                  :value="item.ID"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="所属区域">
              <el-input
                v-model="formData.kehumingcheng"
                placeholder="请输入所属区域"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="地址查询码">
              <el-input
                v-model="formData.jiansuoma"
                placeholder="请输入地址查询码"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="详细地址" required>
              <el-input
                v-model="formData.kehudizhi"
                placeholder="请输入详细地址"
                :style="{ width: '100%' }"
                @blur="sarchAddress(formData.kehudizhi)"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="纬度">
              <el-input
                v-model="formData.weidu"
                disabled
                placeholder="请输入纬度"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input
                v-model="formData.xioadjfisd"
                placeholder="请输入联系电话"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码" required>
              <el-input
                v-model="formData.tyxyshdm"
                placeholder="请输入统一社会信用代码"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input-number
                v-model="formData.paixiu"
                :min="0"
                :style="{ width: '100%' }"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item label="自定义项2">
              <el-input
                v-model="formData.zhidtiuxia"
                placeholder="请输入自定义项2"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="附件">
              <PreviewUploadBtn v-model="formData.fujiang" />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <div id="baiduMap">
      <div v-if="loade" style="position: absolute; top: 50%; left: 45%">
        加载中<i class="el-icon-loading"></i>
      </div>
    </div>
  </div>
</template>

<script>
import BaiduMapMixin from "@/utils/baidu.map.js";
import ValidateMixin from "@/mixins/ValidateMixin.js";
import PreviewUploadBtn from "@/components/Universal/PreviewUploadBtn/index.vue";
import pca from "./pca-code.json";
/**
 * 表单校验
 */
let REQUIRED_PORP_LIST1 = [
  {
    label: "所属公司",
    prop: "leixingdaima",
  },
];

export default {
  name: "tab1",
  mixins: [BaiduMapMixin, ValidateMixin],
  components: {
    PreviewUploadBtn,
  },
  props: {
    mode: {
      type: String,
    },
  },
  computed: {},

  data() {
    return {
      loade: true,
      baiduMap: null,
      formData: {
        leixingdaima: "",
        CompanyCode: "",
        jilubianhao: "",
        kehujiancheng: "",
        kehudizhi: "",
        jiansuoma: "",
        jingdu: "113.276498",
        weidu: "23.124888",
        xioadjfisd: "",
        kehumingcheng: "",
        newaddress: "",
        tonyishehuiixngyondao: "",
        suoshugonghyingshang: "",
        xiaoshouyuanmingcheng: "",
        zhidinyixiang: "",
        teshuyaoqiu: "",
        tyxyshdm: "",
        paixiu: 0,
        zhidtiuxia: "",
        fujiang: [],
      },

      listOptions: {
        CompanyCodeOptions: [
          {
            ID: "123",
            Nmae: "地方",
          },
        ],
        addressAllOption: pca,
        ShuilvOptions: [
          {
            ID: "VAT 16",
            Nmae: "VAT 16",
          },
          {
            ID: "VAT 10",
            Nmae: "VAT 10",
          },
          {
            ID: "VAT 9",
            Nmae: "VAT 9",
          },
          {
            ID: "VAT 6",
            Nmae: "VAT 6",
          },
          {
            ID: "VAT 3",
            Nmae: "VAT 3",
          },
          {
            ID: "其他",
            Nmae: "其他",
          },
        ],
        IsshuiOptions: [
          {
            ID: "含税",
            Nmae: "含税",
          },
          {
            ID: "不含税",
            Nmae: "不含税",
          },
        ],
      },
    };
  },

  methods: {
    //区change
    mapChange() {
      let f = this.formData;
      f.kehudizhi = f.newaddress[0] + f.newaddress[1] + f.newaddress[2];
      this.sarchAddress(f.kehudizhi);
    },
    //校验必填
    verify_required() {
      return this.$validateForm(this.formData, REQUIRED_PORP_LIST1);
    },
    // 加载地图
    async getMap() {
      // 创建地图实例
      this.baiduMap = new BMap.Map("baiduMap");
      // 创建一个地理位置实例
      const myGeol = new BMap.Geolocation();
      // 获取当前位置信息
      return new Promise((resolve, reject) => {
        myGeol.getCurrentPosition((result) => {
          if (myGeol.getStatus() === BMAP_STATUS_SUCCESS) {
            resolve(result);
            return;
          }
          reject();
        });
      });
    },
    /**
     * 获取地图内部实例
     *
     * @param result 位置信息结果
     * @returns 无返回值
     */
    getMapInternal(result) {
      console.log("位置信息===>", result);
      // 如果获取位置信息成功-将经纬度信息存储到formData对象中
      // this.formData.jingdu = result.longitude || "116.404";
      // this.formData.weidu = result.latitude || "39.915";
      // 初始化百度地图实例
      this.__mapInstance__ = this.initBaiduMap({
        containerId: "baiduMap",
        lng: this.formData.jingdu,
        lat: this.formData.weidu,
      });
      // 禁止点击
      // // 根据mode的值绑定或取消点击事件
      // this.bindMapClick();
    },
    // 根据经纬度-更新地址/经纬度
    async sarcLnglat(point) {
      let myGeo = new BMap.Geocoder(); // 创建一个地理编码器对象
      let $$point = new BMap.Point(point.lng, point.lat); // 创建一个地理坐标点对象
      // 根据坐标得到地址描述
      try {
        let result = await new Promise((resolve, reject) => {
          // 创建一个Promise对象，用于异步操作
          myGeo.getLocation($$point, (result) => {
            // 调用地理编码器对象的getLocation方法，根据坐标获取地址信息
            resolve(result); // 将结果传递给Promise对象的resolve方法
          });
        });
        // 设置地址/经纬度
        console.log("获取定位的地址", result); // 打印获取到的地址信息
        this.formData.kehudizhi = result.address; // 将获取到的地址信息赋值给formData对象的dizhi属性
        this.formData.jingdu = result.point.lng; // 将获取到的经度赋值给formData对象的jingdu属性
        this.formData.weidu = result.point.lat; // 将获取到的纬度赋值给formData对象的weidu属性
      } catch (error) {
        console.log("地图编码发生错误", error); // 打印地理编码发生的错误信息
        return this.$notify.error({
          title: "消息",
          message: "地图编码发生错误,请重新加载！",
        });
      }
    },
    // 根据地址-获取经纬度
    async sarchAddress(diqu1) {
      // 省/市-地址
      console.log([diqu1]); // 打印省/市和地址信息
      let myGeo = new BMap.Geocoder(); // 创建地理编码器实例
      //将地址解析结果显示在地图上, 并调整地图视野
      try {
        let point = await new Promise((resolve, reject) => {
          myGeo.getPoint(
            diqu1, // 地址
            (point) => {
              resolve(point); // 解析成功时，返回解析结果
            }
          );
        });
        if (!point) {
          this.formData.jingdu = "";
          this.formData.weidu = "";
          // 如果解析结果为空，直接返回
          return this.$notify.error({
            title: "消息",
            message: "无法解析该省/市坐标",
          });
        }
        let $$point = new BMap.Point(point.lng, point.lat); // 创建百度地图的坐标点实例 // 根据坐标得到地址描述

        this.clearOverlays();
        let map = this.getBaiduMap(); // 获取百度地图实例
        map.centerAndZoom($$point, 20); // 将地图中心设置为解析得到的坐标点，并设置缩放级别为20
        this.addPoint(point); // 在地图上添加标记点
        this.formData.jingdu = point.lng; // 将获取到的经度赋值给formData对象的jingdu属性
        this.formData.weidu = point.lat; // 将获取到的纬度赋值给formData对象的weidu属性
      } catch (error) {
        console.log("地图编码发生错误", error); // 打印地理编码错误信息
        return this.$notify.error({
          title: "消息",
          message: "地图编码发生错误,请重新加载！",
        });
      }
    },

    // 绑定点击事件
    bindMapClick() {
      this.bindMapClickEvent((e) => {
        console.log("//////点击地图打印地址经纬度信息", e);
        // 调用sarcLnglat函数，将点击的地图坐标转换为地址信息
        this.sarcLnglat(e.point);
        // 在地图上添加标点覆盖物
        this.addPoint(e.point);
      });
    },
  },
  created() {
    Promise.all([
      // 加载地图
      this.getMap(),
    ])
      .then((result) => {
        let [data1] = result;
        this.getMapInternal(data1);
        this.loade = false;
      })
      .catch((err) => {});

    if (this.mode === "addkehuxingxi_from") {
      console.log("新增");
    }
    if (this.mode === "editkehuxingxi_from") {
      console.log("编辑");
    }
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  padding-right: 25px;
  &_left {
    width: 55%;
  }
}

#baiduMap {
  width: 600px;
  height: 600px;
  border: 1px solid rgb(12, 12, 12);
  max-height: 600px;
  flex: 0 0 40%;
  box-sizing: border-box;
  margin-left: 20px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 -4px 8px rgba(0, 0, 0, 0.1),
    4px 0 8px rgba(0, 0, 0, 0.1), -4px 0 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.h3_tab {
  margin-bottom: 0 !important;
}
.ekeik {
  &.el-checkbox {
    margin: 0 5px;
  }
}
</style>
